import React from 'react'
import { Link,useNavigate } from 'react-router-dom'
import {
    AppstoreOutlined,
    ContainerOutlined,
    MailOutlined,
    PieChartOutlined,
} from '@ant-design/icons';
import { Menu } from 'antd';
import './index.less'
import logo from '../../assets/images/logo.png'


const items = [
    { key: '/home', icon: <PieChartOutlined />, label: '首页' },
    {
        key: 'goods',
        label: '商品',
        icon: <MailOutlined />,
        children: [
            { key: '/category', label: '品牌分类' },
            { key: '/product', label: '商品分类' },
        ],
    },
    { key: '/user', icon: <ContainerOutlined />, label: '用户管理' },
    { key: '/role', icon: <ContainerOutlined />, label: '角色管理' },

    {
        key: 'sub2',
        label: '图形图表',
        icon: <AppstoreOutlined />,
        children: [
            { key: '/pie', label: '柱形图' },
            { key: '/line', label: '折线图' },
            { key: '/bar', label: '饼图' },
        ],
    },
];

export default function LeftNav() {
    const navigate = useNavigate();



    function onSelect(item) {
        navigate(item.key)
    }


    return (
        <div className='left-nav'>

            <Link to='/' className='left-nav-header'>
                <img src={logo} alt="logo" />
                <h1>硅谷后端</h1>
            </Link>



            <Menu
                defaultSelectedKeys={['2']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                theme="dark"
                items={items}
                onSelect={onSelect}
            />

        </div>
    )

}
